<template>
    <div class="row lyear-wrapper">
        <div class="lyear-login">
            <div class="login-center">
                <div class="login-header text-center">
                    <a href="javascript:void(0);"> <img alt="light year admin" src="/static/images/1.png"> </a>
                </div>
                <form>
                    <router-link to="/index" @click.native="flushCom"><input type="hidden" id="to-index" ></router-link>
                    <div class="form-group has-feedback feedback-left">
                        <input type="text" v-model="user.username" placeholder="请输入用户昵称" class="form-control" name="username" id="username" />
                        <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                    </div>
                    <div class="form-group has-feedback feedback-left">
                        <input type="password" v-model="user.password" placeholder="请输入用户密码" class="form-control" id="password" name="password" />
                        <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-block btn-primary" type="button" @click="submitLogin">立即登录</button>
                    </div>
                </form>
                <hr>
                <footer class="col-sm-12 text-center">
                    <p class="copyright">Copyright &copy; 2021. <a target="_blank" href="https://space.bilibili.com/384182241">杨杨吖</a> All rights reserved.</p>
                </footer>
            </div>
        </div>
    </div>
</template>



<script>
    export default {
        name: 'login',
        data: function() {
            return {
                user:{}
            }
        },
        //mounted 页面渲染完后执行 钩子函数
        mounted:function(){

        },
        methods:{
            submitLogin(){
                $("#to-index").click();
                let _this = this;
                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/local_company/login", _this.user).then((response)=>{
                    let resp = response.data;
                    Loading.hide();
                    if(resp.code === 0){
                        Tool.setLoginUser(resp.data.token);
                        //$("#to-index").click();
                        _this.getPermission();
                    }else{
                        alert(resp.msg);
                    }
                });
            },
            getPermission(){
                let _this = this;
                let token = Tool.getLoginUser();
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/permission/get_permission",{token:token}).then((response)=>{
                    let resp = response.data;
                    if (resp.code === 0) {
                        console.log(resp.data);
                        let permissionDb = resp.data;
                        let permissionList = [];
                        for(let i=0; i<permissionDb.length; i++){
                            permissionList.push(permissionDb[i].name);
                        }
                        Permission.setPermission(permissionList);
                        _this.$router.push("/index");
                    } else {
                        alert(resp.msg);
                    }
                });
            },
            flushCom(){
                let _this = this;
                //_this.$router.go(0);
            }
        }
    }

</script>

<style>
    .lyear-wrapper {
        position: relative;
    }
    .lyear-login {
        display: flex !important;
        min-height: 100vh;
        align-items: center !important;
        justify-content: center !important;
    }
    .lyear-login:after{
        content:'';
        min-height:inherit;
        font-size:0;
    }
    .login-center {
        background: #fff;
        min-width: 29.25rem;
        padding: 2.14286em 3.57143em;
        border-radius: 5px;
        margin: 2.85714em;
    }
    .login-header {
        margin-bottom: 1.5rem !important;
    }
    .login-center .has-feedback.feedback-left .form-control {
        padding-left: 38px;
        padding-right: 12px;
    }
    .login-center .has-feedback.feedback-left .form-control-feedback {
        left: 0;
        right: auto;
        width: 38px;
        height: 38px;
        line-height: 38px;
        z-index: 4;
        color: #dcdcdc;
    }
    .login-center .has-feedback.feedback-left.row .form-control-feedback {
        left: 15px;
    }
</style>

